const supportObserver = wx.canIUse("createIntersectionObserver");

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    src: {
      type: String,
      value: '',
      observer(newVal, oldVal) {
        this.resetData();
        this.addObserver();
      }
    },
    mode: {
      type: String,
      value: 'scaleToFill',
    },
    showMenuByLongpress: {
      type: Boolean,
      value: false,
    }
  },
  /**
   * 组件外部样式类
   */
  externalClasses: ['image-class'],
  /**
   * 组件的初始数据
   */
  data: {
    show: false, // 是否显示图片
    imageShow: false, // 图片加载成功
    imageErrShow: false, // 图片加载失败
  },
  ready() {
    this.addObserver();
  },
  detached() {
    this.clear();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 清除监听
     */
    clear() {
      if (this.observer) {
        this.observer.disconnect();
      }
      this.observer = null;
    },
    /**
     * 重置数据
     */
    resetData() {
      this.setData({
        show: false,
        imageShow: false,
        imageErrShow: false,
      })
    },
    /**
     * 增加监听
     */
    addObserver() {
      if (!supportObserver) {
        return this.setData({ show: true });
      }
      if (this.observer || this.data.show) {
        return;
      }
      try {
        const observer = this.createIntersectionObserver();
        observer.relativeToViewport(this.properties.viewport).observe('.lazy-image-wrap', () => {
          this.setData({
            show: true
          });
          this.clear();
        });
        this.observer = observer;
      } catch (e) {
        this.setData({
          show: true
        });
      }
    },
    /**
     * 图片加载
     */
    imageLoad() {
      this.setData({
        imageShow: true
      });
    },
    /**
     * 图片加载错误
     */
    imageError() {
      this.setData({
        imageErrShow: true
      })
    }
  }
})
